<template>
	<public-view navType="order" navTitle="地址选择" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content flex f-d-c a-i-c">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options"
					style="margin-bottom: 16rpx;" v-for="(item, index) in address_list" :key="index" @change="swipeChange($event, index)">
					<view class="address-item flex a-i-c j-c-b" @click="chooseAddressItem(item)">
						<view class="left">
							<view class="top-view flex a-i-c">
								<view class="tag color-EE8300 f-s-18">
									<block v-if="item.flag === 'home'">
										家
									</block>
									<block v-if="item.flag === 'company'">
										公司
									</block>
									<block v-if="item.flag === 'default'">
										默认
									</block>
								</view>
								<view class="f-s-30 color-333 f-w-b">
									{{item.name||""}}
								</view>
								<view class="phone f-s-30 color-333 f-w-b">
									{{item.mobile||""}}
								</view>
							</view>
							<view class="address-info l-h-34 f-s-26" style="color: #666262;">
								{{item.province_text||""}}{{item.city_text||""}}{{item.area_text||""}}{{item.address_desc ||""}}
							</view>
						</view>
						<view class="right all-center" @click.stop="goToEdit(item)">
							<image class="icon" src="@/static/images/good-edit.svg" mode=""></image>
						</view>
					</view>
					<template v-slot:right>
						<view class="right-del f-s-26 color-fff flex f-d-c all-center" @clic.stop="onClick(item)">
							<image class="icon" src="@/static/images/good-del.svg" mode=""></image>
							<text>删除</text>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view class="" style="height: 400rpx;">
				
			</view>
			<bottom-btn btnType="1" btnIndex="3" @click="goToEdit({})">
				添加新地址
			</bottom-btn>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				address_list:[]
			};
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			goTo,
			chooseAddressItem(item={}){
				this.$store.commit("changeOrderAddress",item)
				uni.navigateBack()
			},
			goToEdit(item = {}){
				this.goTo({url:"/pages/address/addAddress?data="+JSON.stringify(item)})
			},
			getAddressList(){
				let that = this
				that.util.postRequest({
					url:"v1/user_address/index",
				}).then(res=>{
					console.log(res)
					that.address_list = res.data.data
				})
			},
			onClick(e) {
				
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			}
		}
	}
</script>
<style>
	.uni-swipe{
		margin-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.bottom-btna{
		position: fixed;
		bottom: 174upx;
		width: 602upx;
		height: 96upx;
		background: #EE8300;
		border-radius: 108upx;
	}
	.right-del{
		width: 108upx;
		border-radius: 10upx;
		background: #F32E2E;
		.icon{
			width: 36upx;
			height: 36upx;
			margin-bottom: 10upx;
		}
	}
	.address-item {
		width: 690upx;
		background: #FFFFFF;
		border-radius: 20upx;
		// margin-bottom: 30rpx;
		.right{
			height: 100%;
			width: 108upx;
			.icon{
				width: 48upx;
				height: 48upx;
			}
		}
		.left {
			width: 536upx;
			padding: 30upx 0 30upx 30upx;

			.top-view {
				margin-bottom: 12upx;

				.phone {
					margin-left: 16upx;
				}

				.tag {
					background: rgba(238, 131, 0, 0.2);
					border-radius: 6upx;
					padding: 4upx 6upx;
					margin-right: 16upx;
				}
			}
		}
	}

	.content {
		width: 100%;
		padding: 32upx 30upx;
	}
</style>